<!--
 * @Author: “ChengNan” 1429323234@qq.com
 * @Date: 2024-04-16 15:09:07
 * @LastEditors: “ChengNan” 1429323234@qq.com
 * @LastEditTime: 2024-06-07 15:12:21
 * @FilePath: /src/views/4.$set/$set.vue
 * @Description: $set
-->
<template>
  <div>
    <h1>$set</h1>
    <br>
    {{ user.name }}
    <br/>
    {{ user.age }}
    <br/>
    <button @click="addAge">addAge</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe',
      },
      i: 18,
    };
  },
  mounted () {


  },
  methods: {
    addAge() {
      // 直接赋值不会触发视图更新
      this.user.age = ++this.i

      // 使用 this.$set 保证 age 属性具有响应性
      // this.$set(this.user, 'age', ++this.i);

      console.log(this.user.age);
    },
  },
};
</script>

<style lang="scss" scoped></style>